<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Full Calendar - Ace Admin</title>

		<meta name="description" content="with draggable and editable events" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="assets/css/fullcalendar.min.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="no-skin">

		<div class="main-container ace-save-state" id="main-container">

            <div >

                <div class="ui-state-highlight">handle<a class="btn-mini btn-danger">button</a></div>
                <div class="ui-state-highlight">handle<input placeholder="input" /></div>
                <div class="ui-state-highlight"/>handle<Image src="http://i4.piimg.com/11340/7f638e192b9079e6.jpg" width="50px" height="50px"/>
                </div>
                <div class="ui-state-highlight">handle
                    <label class="middle">
                        <input class="ace" type="checkbox" id="id-disable-check">
                        <span class="lbl"> Disable it!</span>
                    </label></div>
            <div class="ui-state-highlight">handle<div class="radio">
                <label>
                    <input name="form-field-radio" type="radio" class="ace">
                    <span class="lbl"> radio option 1</span>
                </label>
            </div></div>

            </div>

            <div id="sortable" width="500" height="500" style="padding:30px; width:500px;height:500px;background-color: #a6e1ec">

            </div>

		</div><!-- /.main-container -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="assets/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="assets/js/jquery-ui.custom.min.js"></script>
		<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="assets/js/moment.min.js"></script>
		<script src="assets/js/fullcalendar.min.js"></script>
		<script src="assets/js/bootbox.js"></script>

		<!-- ace scripts -->
		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
            $( function() {
                $( "#sortable" ).sortable({
                    revert: true
                });
                // $( "#draggable" ).draggable({
                //   connectToSortable: "#sortable",
                //   helper: "clone",
                //   revert: "invalid"
                // });

                $('.ui-status-highlight').each(function() {
                    $(this).draggable({
                        connectToSortable: "#sortable",
                        helper: "clone",
                        revert: "invalid"
                    });
                });

                $( "ul, li" ).disableSelection();
            } );
		</script>
	</body>
</html>
